<template>
  <div>
    <div class="header" @keydown.enter="sendSearch">
      <span class="iconfont iconjiantou2" @click="goback"></span>
      <div class="search">
        <span class="iconfont iconsearch"></span>
        <input
          type="text"
          v-model="keyword"
          placeholder="请输入你要搜索的新闻"
        />
      </div>
      <div class="btn" @click="sendSearch">搜索</div>
    </div>
    <!-- 搜索匹配上 隐藏 历史记录 -->
    <div class="history" v-if="postData.length == 0">
      <h4>历史记录</h4>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in history"
          :key="index"
          @click="addSearch(item)"
        >
          {{ item }}
        </div>
      </div>
      <div @click="remove" class="remove">删除搜索记录</div>
    </div>
    <hr />
    <PostItem :article="post" v-for="post in postData" :key="post.id" />
  </div>
</template>

<script>
import PostItem from "@/components/PostItem";
export default {
  components: {
    PostItem,
  },
  data() {
    return {
      keyword: "",
      history: [],
      postData: [],
    };
  },

  created() {
    // 历史记录持久化第二步,如果进入页面时发现本地储存有历史数据, 应该恢复
    if (localStorage.getItem("history")) {
      this.history = JSON.parse(localStorage.getItem("history"));
    }
  },
  watch: {
    keyword(val) {
      if (!val) {
        this.postData = [];
      }
    },
    //
    history() {
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
  methods: {
    sendSearch() {
      this.history.push(this.keyword);
      this.$axios({
        url: "/post_search",
        params: { keyword: this.keyword },
      }).then((res) => {
        if (res.data.data.length == 0) {
          this.$toast("未找到相关新闻文章");
          this.keyword = "";
        }
        console.log(res.data);
        this.postData = res.data.data;
      });
    },
    goback() {
      // 若页面为搜索匹配后的页面 回退回原搜索页面
      if (this.postData.length > 0) {
        (this.postData = []), (this.keyword = "");
      } else {
        // 直接返回
        this.$router.back();
      }
    },
    addSearch(item) {
      this.keyword = item;

      this.sendSearch();
    },
    remove() {
      localStorage.removeItem("history");
      this.history = [];
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 16 / 360 * 100vw;
  display: flex;
  align-items: center;
  .iconjiantou2 {
    font-size: 14 / 360 * 100vw;
  }
  .search {
    flex-grow: 1;
    box-sizing: border-box;
    height: 30 / 360 * 100vw;
    border: 1px solid #ccc;
    border-radius: 15 / 360 * 100vw;
    margin-right: 20 / 360 * 100vw;
    margin-left: 10 / 360 * 100vw;
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 14 / 360 * 100vw;
      padding-left: 10 / 360 * 100vw;
      padding-right: 10 / 360 * 100vw;
    }
    input {
      outline: none;
      border: none;
    }
  }
  .btn {
    font-size: 14 / 360 * 100vw;
  }
}
.history {
  padding: 16 / 360 * 100vw;
  h4 {
    font-size: 16 / 360 * 100vw;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      font-size: 14 / 360 * 100vw;
      padding: 5 / 360 * 100vw 0;
      padding-right: 5 / 360 * 100vw;
    }
  }
  .remove {
    font-size: 14 / 360 * 100vw;
    color: #888;
  }
  .none {
    display: none;
  }
}
</style>